<template>
  <div>
    <div class="establish-h">
      <div class="establish-f" @click="signOut">取消</div>
      <div class="establish-title">创建菜谱</div>
      <div class="establish-baocun" @click="baochu">保存</div>
    </div>
    <div class="cover">
      <input
        v-show="fileFlag"
        type="file"
        id="file"
        @change="file"
        ref="file"
      />
      <img src="" v-show="!fileFlag" width="100%" height="300" ref="picture" />
    </div>
    <div class="menu-name">
      <input type="text" placeholder="写下你的菜普名" v-model="menuname" />
    </div>
    <div class="story">
      <input type="text" placeholder="请写下这道菜的故事" v-model="story" />
    </div>

    <div class="materialss">
      <div class="materialss-title">用料</div>
      <div class="materials-son">
        <div class="tianjiao">
          <div class="materials-l">
            <input type="text" placeholder="食材" v-model="shicai" />
            <input type="text" placeholder="用量" v-model="yongliang" />
          </div>
          <div class="materials-r">
            <button @click="add">添加</button>
          </div>
        </div>
        <div class="plus">
          <ul>
            <li v-for="(item, index) in yongl" :key="index">
              <p>{{ item.shicai }}</p>
              <p>{{ item.yongliang }}</p>
              <span @click="del(index)">删除</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="practices">
      <div class="practices-title">做法</div>
      <div class="practices-son">
        <div class="practices-flie">
          <input type="file" id="flies" ref="files" @change="filesUrl" />
          <img src="" ref="filesUrl" v-show="false" alt="" />
          点击上传图片
        </div>
        <div class="practices-input">
          <input type="text" placeholder="输入步骤" v-model="buzhouText" />
        </div>
        <div class="buzhouAdd" @click="buzhouAdd">添加</div>
      </div>
      <div class="practices-list">
        <ul>
          <li v-for="(item, index) in buzhou" :key="index">
            <div class="buzhoutitle">
              <p>步骤{{ index + 1 }}</p>
              <span @click="delBuzhou(index)">删除</span>
            </div>
            <div class="practicesImg">
              <img :src="item.filesUrl" alt="" />
            </div>
            <div class="practicesText">{{ item.buzhouText }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="baikuai"></div>
  </div>
</template>

<script>
export default {
  name: "establishData",
  data() {
    return {
      establishlist: [],
      yongl: [],
      buzhou: [],
      menuname: "",
      story: "",
      fileFlag: true,
      shicai: "",
      yongliang: "",
      fileFlags: true,
      buzhouNum: 1,
      buzhouText: "",
    };
  },
  methods: {
    signOut() {
      this.$emit("signOut");
      this.$router.push("/homeView");
    },
    file() {
      this.fileFlag = false;
      let data = this.$refs.file.files[0];
      let img = this.$refs.picture;
      var fr = new FileReader();
      fr.readAsDataURL(data);
      // 图片读取完成，触发下方法
      fr.onloadend = function (e) {
        // console.log(e);
        // console.log(data);
        img.src = e.target.result;
      };
    },

    add() {
      if (this.shicai != "" && this.yongliang != "") {
        this.yongl.push({
          shicai: this.shicai,
          yongliang: this.yongliang,
        });
        this.shicai = this.yongliang = "";
      }
    },
    del(index) {
      this.yongl.splice(index, 1);
    },

    filesUrl() {
      let data = this.$refs.files.files[0];
      let img = this.$refs.filesUrl;
      var fr = new FileReader();
      fr.readAsDataURL(data);
      // 图片读取完成，触发下方法
      fr.onloadend = function (e) {
        img.src = e.target.result;
      };
    },
    buzhouAdd() {
      if (this.buzhouText != "") {
        this.buzhou.push({
          filesUrl: this.$refs.filesUrl.src,
          buzhouText: this.buzhouText,
        });
        this.buzhouText = "";
      }
    },
    delBuzhou(index) {
      this.buzhou.splice(index, 1);
    },
    baochu() {
      let times=new Date().getFullYear()+"-"+new Date().getMonth()
      this.establishlist.unshift({
        id: 301,
        picture: this.$refs.picture.src,
        foodName: this.menuname,
        times:times,
        story: this.story,
        buzhou: this.buzhou,
        yongl: this.yongl,
      });
      window.localStorage.setItem(
        "establishlist",
        JSON.stringify(this.establishlist)
      );
      this.$router.push("/homeView");
      this.$emit("baochu");
    },
  },
  created() {
    if (localStorage.establishlist) {
      this.establishlist = JSON.parse(
        window.localStorage.getItem("establishlist")
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.establish-h {
  position: sticky;
  top: 0;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  background-color: white;
  .establish-f {
    color: #e9b4aa;
  }
  .establish-baocun {
    color: #e9b4aa;
  }
}
.cover {
  height: 300px;
  overflow: hidden;
  background-color: #efefed;
  input {
    margin-top: 135px;
  }
}
.menu-name {
  padding: 23px 20px 20px 20px;
  height: 40px;
  border-bottom: 1px solid black;
  input {
    width: 100%;
    height: 40px;
    font-size: 30px;
    border: 0;
    outline: none;
    text-align: center;
  }
}
.story {
  height: 20px;
  padding: 25px 20px;
  margin-bottom: 45px;
  input {
    width: 100%;
    height: 20px;
    border: 0;
    outline: none;
  }
}
.materialss {
  padding: 0 25px;
  .materialss-title {
    height: 40px;
    font-size: 20px;
  }
  .tianjiao {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .materials-l {
      display: flex;
      width: 90%;
      height: 100%;
      input {
        width: 50%;
        border: 0;
        outline: none;
      }
    }
    .materials-r {
      button {
        background-color: white;
        border: 0;
        outline: none;
        color: blue;
      }
    }
  }
  .plus {
    ul {
      li {
        display: flex;
        justify-content: space-between;
        p {
          width: 45%;
        }
        span {
          color: red;
        }
      }
    }
  }
}

.practices {
  margin-top: 48px;
  padding: 20px;
  .practices-title {
    height: 48px;
    font-size: 20px;
  }
  .practices-son {
    margin-bottom: 20px;
    .practices-flie {
      position: relative;
      display: block;
      overflow: hidden;
      width: 100%;
      height: 34px;
      line-height: 34px;
      border: 1px solid #99d3f5;
      border-radius: 4px;
      text-align: center;
      background: #d0eeff;
      cursor: pointer;
      input {
        display: inline-block;
        position: absolute;
        font-size: 12px;
        opacity: 0;
        top: 0;
        left: 160px;
        left: 0;
        z-index: 1;
        cursor: pointer;
      }
    }
    .practices-input {
      width: 100%;
      height: 20px;
      padding: 20px 0;
      input {
        border: 0;
        outline: none;
      }
    }
    .buzhouAdd {
      text-align: center;
      color: blue;
    }
  }
  .practices-list {
    ul {
      li {
        .buzhoutitle {
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            font-weight: bold;
          }
          span {
            color: red;
          }
        }
        .practicesImg {
          width: 100%;
          min-height: 200px;
          max-height: 250px;
          background-color: #99d3f5;
          overflow: hidden;
          border-radius: 16px;
          margin: 10px 0;
          img {
            width: 100%;
          }
        }
        .practicesText {
          width: 100%;
        }
      }
    }
  }
}
</style>